import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {withRouter} from 'react-router'
import {Link} from 'react-router-dom'
import {observer,inject} from 'mobx-react'
import {Layout, Row, Col, Breadcrumb, Menu, Icon, Spin} from 'antd'
import Head from './head';
import ReMenu from '../components/menu';

import Logo from './logo.png'
// import 'antd/dist/antd.css';
import './home.less'


@withRouter
@inject('home')
@inject('login')
@observer
export default class IndexLayout extends Component {
  constructor(props) {
    super(props);
    // 控制菜单的收缩
    this.state = {
      collapsed: false
    }

    // 如果不经过登录页进入系统，判断登录状态
    let result = this.props.home.init();
    if(!result) {
      this.props.history.push('/login');
    }else {
      this.props.login.setLoginState(true);
    }
  }

  componentWillMount() {
    
  }

  componentDidMount() {
    // console.log(this.props);
  }

  componentWillReceiveProps() {
    this.getBreadcrumb()

  }

  onCollapse = (collapsed) => {
    this.setState({ collapsed });
  }

  getBreadcrumb() {
    const pathSnippets = location.hash.replace('#', '').split('/').filter(i => i);
    
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
      if(_ === 'home') return null;
      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
      return (
        <Breadcrumb.Item key={url}>
          <span>{_}</span>
          {/* {index === pathSnippets.length - 1 ? <span>{_}</span> : <Link to={url}>{_}</Link>} */}
        </Breadcrumb.Item>
      );
    });

    return extraBreadcrumbItems.length > 0 ? [(
      <Breadcrumb.Item key="home">
        <Link to="/home">Home</Link>
      </Breadcrumb.Item>
    )].concat(extraBreadcrumbItems) : 
    <Breadcrumb.Item key="home">
      <span>Home</span>
    </Breadcrumb.Item>;
  }

  render() {
    return (
      <Layout id="app-home" style={{minHeight: '100vh'}}>
        <Layout.Header className="header" ref="layoutHeader">
          <div className="logo-wrap">
            <img src={Logo} alt="logo" className="logo" />
          </div>
          <h2 className="title">{this.props.home.projectName}</h2>
          <div className="head-menu">
            <Head />
          </div>
        </Layout.Header>
        <Layout className="bottom-layout">
          <Layout.Sider className="sider" breakpoint="lg">
            {/* <ReMenu collapsed={this.state.collapsed}></ReMenu> */}
            <ReMenu></ReMenu>
          </Layout.Sider>
          <Layout className="right-layout">
            <Spin className="spin" spinning={this.props.home.loading} delay={500} />
            <Breadcrumb ref="breadCrumb" className="bread-crumb" style={{ padding: '12px 20px', borderBottom: '1px solid #ddd' }}>
              {this.getBreadcrumb()}
            </Breadcrumb>
            <Layout.Content className="content" style={{height: `${window.innerHeight - 58 - 46}px`}}>
              {this.props.children}              
            </Layout.Content>
          </Layout>
        </Layout>
        {/* <Layout.Footer>Footer</Layout.Footer> */}
      </Layout>
    )
  }
}
